<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
ul,body{ margin:0;padding:0;}
li{list-style:none;}
img{vertical-align:top;border:none;}

#ul1{position:absolute;top:0px;left:0;}
#ul1 li{position:absolute;opacity:0;filter:alpha(opacity=0);}
#ul2{height:20px; position:absolute;top:140px;left:350px;}
#div1{width:490px;height:170px;margin:0 auto;border:2px solid #999;position:relative;}
#ul2 li{float:left;height:20px;width:20px;background:#FFF;color:#FF8000;border:1px solid #999;text-align:center;margin:0 3px;}
#ul2 .active{color:#fff;background:#FF8000;}
</style>


<script type="text/javascript" src="move.js"></script>
<script>
window.onload=function(){
	
	var oDiv=document.getElementById('div1');
	var oUl1=document.getElementById('ul1');
	var oUl2=document.getElementById('ul2');
	var aLi1=oUl1.getElementsByTagName('li');
	var aLi2=oUl2.getElementsByTagName('li');
	var timer=null;
	var iNow=0;
	//鼠标放上去停止自动播放,鼠标离开能够接着上一张自动播放	
	//鼠标点击或者鼠标滑过都会跳转到相应的图片
	autoPlay();
	
	for(var i=0;i<aLi2.length;i++){
		aLi2[i].index=i;//给页数加索引
		aLi2[i].onmouseover=aLi2[i].onclick=function(){
			iNow=this.index;
			fnChange();
		}
	}
	
	oDiv.onmouseover=function(){
		clearInterval(timer);
	}
	oDiv.onmouseout=function(){
		autoPlay();
	}
	
	
		
	function fnChange(){
		for(var j=0;j<aLi1.length;j++){
			aLi2[j].className='';
			aLi1[j].style.filter='filter(alpha=+'+0+')';
			aLi1[j].style.opacity=0;	
		}
		aLi2[iNow%5].className='active';
		startMove(aLi1[iNow%5],{opacity:100});
			
	}

	function autoPlay(){
		timer=setInterval(function(){
			iNow++;
			fnChange();
		
		},1000)
	};

};
</script>
</head>

<body>
<div id="div1">
	<ul id="ul1">
        <li style="opacity:1;filter:alpha(opacity=100);"><img src="1.png" alt=""/></li>
        <li><img src="2.jpg" alt=""/></li>
        <li><img src="3.png" alt=""/></li>
        <li><img src="4.jpg" alt=""/></li>
        <li><img src="5.jpg" alt=""/></li>
	</ul>
    <ul id="ul2">
    	<li class="active">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</div>

</body>
</html>
